<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//1.组件注册
			   //1.1  组件名
			      //当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候，
			      //我们强烈推荐遵循 W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符)。
			      //组件名大小写
				      //使用短横线分隔命名(kebab-case)
//				            Vue.component('my-component-name', { /* ... */ })
				      //使用驼峰式命名(PascalCase)
//				            Vue.component('MyComponentName', { /* ... */ })
               //1.2 全局注册
//                  Vue.component('component',{/*...选项...*/})

               //1.3 局部注册
//                 	      var ComponentA = { /* ... */ };
//                 	      new Vue({
//						  		el:'#app',
//						  		components: {
//						    	  'component-a': ComponentA
//						  		}
//				          })
                    //注意局部注册的组件在其子组件中不可用
                    
               //1.4 模块系统
                    //在模块系统中局部注册
                    
            //2. Prop
            
               //2.1 Prop的大小写
                     //HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。
                     //这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：
                     
               //2.2 Prop类型
               
               //2.3 传递静态或动态 Prop
                     //prop 可以通过 v-bind 动态赋值
                     //传入一个数字
                     //传入一个布尔值
                     //传入一个数组
                     //传入一个对象
                     //传入一个对象的所有属性
//                          <div id="app">
//		     					<component-a v-bind:title="post"></component-a>
//							</div>
//                          var ComponentA = {
//								props:{
//									  title: String,
//									  likes: Number,
//									  isPublished: Boolean,
//									  commentIds: Array,
//									  author: Object
//								},
//								template:`<button>{{title.id}}</button>`
//							}
//							new Vue({
//								  el: '#app',
//								  data:{
//								  	msg:'A组件',
//								  	post:{
//								  		id:1,
//								  		title:"ls"
//								  	}
//								 },
//								  components: {
//								    'component-a': ComponentA
//								  }
//							})

               //2.4 单向数据流
                     //所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。
                     //这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。
                         //1.这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。 在这种情况下，最好定义一个本地的 data 属性并将这个 prop 用作其初始值。
//                                      props: ['initialCounter'],
//										data: function () {
//										  return {
//										    counter: this.initialCounter
//										  }
//										}
                         //2.这个 prop 以一种原始的值传入且需要进行转换。在这种情况下，最好使用这个 prop 的值来定义一个计算属性
//                                  	props: ['size'],
//										computed: {
//										  normalizedSize: function () {
//										    return this.size.trim().toLowerCase()
//										  }
//										}
                     //注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变这个对象或数组本身将会影响到父组件的状态。
                     
               //2.5 Prop验证
                   //我们可以为组件的 prop 指定验证要求，例如你知道的这些类型。如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你。
                   //为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。
//			                   Vue.component('my-component', {
//									  props: {
//									    // 基础的类型检查 (`null` 匹配任何类型)
//									    propA: Number,
//									    // 多个可能的类型
//									    propB: [String, Number],
//									    // 必填的字符串
//									    propC: {
//									      type: String,
//									      required: true
//									    },
//									    // 带有默认值的数字
//									    propD: {
//									      type: Number,
//									      default: 100
//									    },
//									    // 带有默认值的对象
//									    propE: {
//									      type: Object,
//									      // 对象或数组默认值必须从一个工厂函数获取
//									      default: function () {
//									        return { message: 'hello' }
//									      }
//									    },
//									    // 自定义验证函数
//									    propF: {
//									      validator: function (value) {
//									        // 这个值必须匹配下列字符串中的一个
//									        return ['success', 'warning', 'danger'].indexOf(value) !== -1
//									      }
//									    }
//									  }
//								})
                  //type可以是下列原生构造函数中的一个
                    //String Number Boolean Array Object Date Function Symbol
                    
                    
         //3. 自定义事件
              //3.1 事件名
              	  //触发自定义事件 $emit，this.$emit('my-event')
              	  //v-on监听事件，<my-component v-on:my-event="doSomething"></my-component>
              	  //推荐你始终使用 kebab-case(短横线分隔命名)的事件名
              //3.2 自定义组件的v-model
              //3.3 将原生事件绑定到组件
              //3.4 .sync修饰符
              
         //4. 插槽
              //<slot> 元素作为承载分发内容的出口
              //具名插槽
//                  <component-d>
//			     		  <template slot="header">
//						    <h1>Here might be a page title</h1>
//						  </template>
//						  <p>A paragraph for the main content.</p>
//						  <p>And another one.</p>
//						  <template slot="footer">
//						    <p>Here's some contact info</p>
//						  </template>
//		     		</component-d>
//		     		<component-d>
//						  <h1 slot="header">Here might be a page title</h1>
//						  <p>A paragraph for the main content.</p>
//						  <p>Here's some contact info</p>
//						  <p slot="footer">And another one.</p>
//		    		</component-d>
//	                var ComponentD = {
//						 template: `
//						    <div class="container">
//						       <header>
//						           <slot name="header"></slot>
//						       </header>
//						       <main>
//									<slot></slot>
//						       </main>
//						       <footer>
//						          <slot name="footer"></slot>
//						       </footer>
//						    </div>
//						  `
//					}
                // 可以在 <slot> 标签内部指定默认的内容
		</script>
	</body>
</html>
